<template>
    <div class="Pagination-view">
        <el-pagination
                background
                layout="prev, pager, next"
                :total="totalpag"
                size-change="changesize()"
                @current-change="currentchange">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "Pagination",
        props:{
            totalpag:{
                type:Number,
                required:true,
            }
        },
        data(){
            return{

            }
        },
        mounted(){

        },
        methods: {
            changesize(){
            console.log("123")
            },
            currentchange(val){
                console.log("456",val)
                this.$emit('currentpage', val)
            }
        }
    }
</script>

<style  >
    .Pagination-view{
       display: flex;
        justify-content:flex-end;
        margin-top: 24px;
    }
    .Pagination-view .el-pagination .btn-prev{
        width:32px;
        height:32px;
        margin-left: 8px;
        line-height: 32px;
        background:rgba(255,255,255,1);
        border-radius:6px;
        border:1px #D9D9D9 solid;
    }
    .Pagination-view  .el-pagination .btn-next {
        width:32px;
        height:32px;
        margin-left: 8px;
        line-height: 32px;
        background:rgba(255,255,255,1);
        border-radius:6px;
        border:1px #D9D9D9 solid;
    }
    .Pagination-view .el-pager li{
        width:32px;
        height:32px;
        background:rgba(255,255,255,1);
        border-radius:6px;
        border:1px #D9D9D9 solid;
        margin-left: 8px;
        line-height: 32px;
    }
    .Pagination-view  .el-pager li.active {
        border-color: #20a0ff;
        background-color: #20a0ff;
        color: #fff;
        cursor: default;
    }

</style>